<template>

<div class="big-box">
<div class="nr-center">
    <div class="send-gg">
        <div>
            公告标题: <n-input v-model:value="informTitle" type="text" placeholder="请输入公告标题" maxlength="20" show-count clearable  style="width: 600px;"/>
        </div>
        <div style="margin-top: 20px;">
            公告内容: <n-input v-model:value="informText" type="textarea" placeholder="请输入公告内容" maxlength="200" show-count clearable />
        </div>
        <n-button style="margin-top: 20px;width: 200px;" @click="sendAnnouncement()">发送</n-button>


    </div>
    
</div>


</div>



</template>

<script setup>
import adminHttp from '@/api/adminHttp';
import { ref } from 'vue';
import useUserStore from '@/stores/useUserStore';
import { openInfo } from '@/utils/openInfo';
const userStore = useUserStore()
const informTitle=ref('')
const informText =ref('')

const sendAnnouncement= ()=>{
if (informTitle.value =='' || informText.value=='') {
    openInfo("请先完善表单")
}else{
    //定义要发送的数据
    const SendInform = {
        senderId:userStore.userInfo.userId,
        informTitle:informTitle.value,
        informText:informText.value
    }
    adminHttp.sendAnnouncement(SendInform).then((res)=>{
        if (res.code == 200) {
            openInfo("公告发送成功",'success')
            console.log(res);  
        }
    })
}
}



</script>

<style scoped>
.big-box{
    display: flex;
    justify-content: center;
}

.nr-center{
    height: 980px;
    border-radius: 10px;
    background-color: rgba(250, 246, 246, 0.504);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25); /*阴影 */
    width: 80%;
    margin-top: 15px;
    padding: 20px;
}

.send-gg{
    background-color: rgb(245, 243, 243);
    padding: 20px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
}
</style>